<script setup>
import {useRoute} from "vue-router";
import {onBeforeMount, reactive} from "vue";
import {getAllSongs, getDetailList} from "@/request/api/detailList";

let state = reactive({
    playList: {},// 歌单详情页数据
    songList: {},// 歌单歌曲数据
})
// 获取路由元信息
const userRoute = new useRoute();
onBeforeMount(async () => {
    // 获取歌单详情
    let id = userRoute.query.id
    let res = await getDetailList(id)
    state.playList = res.data.playlist
    // 获取详细歌曲
    let result = await getAllSongs(id, 5, 0)
    state.songList = result.data.songs
    // 防止页面刷新造成数据丢失，将数据保存到sessionStorage
    sessionStorage.setItem('detailList', JSON.stringify(state));
})

</script>

<template>
    <ListTopBar :playList="state.playList" :creator="state.playList.creator" v-if="state.playList.creator"/>
    <!--  判空方法1.Object.keys(obj).length === 0  推荐使用
                 2.JSON.stringify(obj) === '{}'
                 3. 如果使用axios请求，可以判断需要的元素的父元素是否存在-->
    <PlayList :songList="state.songList" :subscribedCount="state.playList.subscribedCount"
              v-if="Object.keys(state.songList).length>0 && state.playList"/>

</template>

<script>
import ListTopBar from "@/components/item/ListTopBar.vue";
import PlayList from "@/components/item/PlayList.vue";

export default {
    components: {
        ListTopBar,
        PlayList,
    }
}
</script>

<style scoped lang="less">

</style>